// out: ../css/layout.css
// relativeUrls: true

@import "style";//基础样式表

@ThemeColor:#333;

.wbc(){
  color: @ThemeColor;
}
.wbbg(){
  background: @ThemeColor;
}
.op0(){
  visibility: hidden;
  opacity: 0;
}
.op1(){
  visibility: visible;
  opacity: 1;
}
.pter(){
  position: absolute;
  content: '';
}
.bg(){
  background-repeat: no-repeat;
  background-position: center;
}
.bgs(){
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.w(@calc;){
  width: calc(~"100% - @{calc}");
}
.h(@height;){
  height: @height;
  line-height: @height;
}
.tra(@tra:.3s;){
  transition: all @tra;
  -webkit-transition: all @tra;
}
.zhuan(@rotate:0;){
  transform: rotate(@rotate);
  -webkit-transform: rotate(@rotate);
}
.da(@scalex:1,@scaley:1){
  transform: scale(@scalex,@scaley);
  -webkit-transform: scale(@scalex,@scaley);
}
.trax(@trax:-50%;){
  transform: translateX(@trax);
  -webkit-transform: translateX(@trax);
}
.tray(@tray:-50%;){
  transform: translateY(@tray);
  -webkit-transform: translateY(@tray);
}
.traxy(){
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

//pro-list动画
.info {
  -webkit-transform:rotate3d(1,0,0,90deg);
  transform:rotate3d(1,0,0,90deg);
  position:absolute;
  pointer-events:none;
  // background: url() no-repeat center rgba(0, 0, 0, 0.15);
  background:rgba(0, 0, 0, 0.15);
  width: 100%;
  height: 100%;
  top: 0;
 }
 .in-top{
  .info {
    -webkit-transform-origin:50% 0%;
    transform-origin:50% 0%;
    -webkit-animation:in-top 300ms ease 0ms 1 forwards;
    animation:in-top 300ms ease 0ms 1 forwards
   }
 } 
 .in-right{
  .info {
    -webkit-transform-origin:100% 0%;
    transform-origin:100% 0%;
    -webkit-animation:in-right 300ms ease 0ms 1 forwards;
    animation:in-right 300ms ease 0ms 1 forwards
   }
 } 
 .in-bottom{
  .info {
    -webkit-transform-origin:50% 100%;
    transform-origin:50% 100%;
    -webkit-animation:in-bottom 300ms ease 0ms 1 forwards;
    animation:in-bottom 300ms ease 0ms 1 forwards
   }
 } 
 .in-left{
  .info {
    -webkit-transform-origin:0% 0%;
    transform-origin:0% 0%;
    -webkit-animation:in-left 300ms ease 0ms 1 forwards;
    animation:in-left 300ms ease 0ms 1 forwards
   }
 } 
 .out-top{
  .info {
    -webkit-transform-origin:50% 0%;
    transform-origin:50% 0%;
    -webkit-animation:out-top 300ms ease 0ms 1 forwards;
    animation:out-top 300ms ease 0ms 1 forwards
   }
 } 
 .out-right{
  .info {
    -webkit-transform-origin:100% 50%;
    transform-origin:100% 50%;
    -webkit-animation:out-right 300ms ease 0ms 1 forwards;
    animation:out-right 300ms ease 0ms 1 forwards
   }
 } 
 .out-bottom{
  .info {
    -webkit-transform-origin:50% 100%;
    transform-origin:50% 100%;
    -webkit-animation:out-bottom 300ms ease 0ms 1 forwards;
    animation:out-bottom 300ms ease 0ms 1 forwards
   }
 } 
 .out-left{
  .info {
  -webkit-transform-origin:0% 0%;
  transform-origin:0% 0%;
  -webkit-animation:out-left 300ms ease 0ms 1 forwards;
  animation:out-left 300ms ease 0ms 1 forwards
 }
 } 
 @-webkit-keyframes in-top {
  from {
   -webkit-transform:rotate3d(-1,0,0,90deg);
   transform:rotate3d(-1,0,0,90deg)
  }
  to {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
 }
 @keyframes in-top {
  from {
   -webkit-transform:rotate3d(-1,0,0,90deg);
   transform:rotate3d(-1,0,0,90deg)
  }
  to {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
 }
 @-webkit-keyframes in-right {
  from {
   -webkit-transform:rotate3d(0,-1,0,90deg);
   transform:rotate3d(0,-1,0,90deg)
  }
  to {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
 }
 @keyframes in-right {
  from {
   -webkit-transform:rotate3d(0,-1,0,90deg);
   transform:rotate3d(0,-1,0,90deg)
  }
  to {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
 }
 @-webkit-keyframes in-bottom {
  from {
   -webkit-transform:rotate3d(1,0,0,90deg);
   transform:rotate3d(1,0,0,90deg)
  }
  to {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
 }
 @keyframes in-bottom {
  from {
   -webkit-transform:rotate3d(1,0,0,90deg);
   transform:rotate3d(1,0,0,90deg)
  }
  to {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
 }
 @-webkit-keyframes in-left {
  from {
   -webkit-transform:rotate3d(0,1,0,90deg);
   transform:rotate3d(0,1,0,90deg)
  }
  to {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
 }
 @keyframes in-left {
  from {
   -webkit-transform:rotate3d(0,1,0,90deg);
   transform:rotate3d(0,1,0,90deg)
  }
  to {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
 }
 @-webkit-keyframes out-top {
  from {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
  to {
   -webkit-transform:rotate3d(-1,0,0,104deg);
   transform:rotate3d(-1,0,0,104deg)
  }
 }
 @keyframes out-top {
  from {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
  to {
   -webkit-transform:rotate3d(-1,0,0,104deg);
   transform:rotate3d(-1,0,0,104deg)
  }
 }
 @-webkit-keyframes out-right {
  from {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
  to {
   -webkit-transform:rotate3d(0,-1,0,104deg);
   transform:rotate3d(0,-1,0,104deg)
  }
 }
 @keyframes out-right {
  from {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
  to {
   -webkit-transform:rotate3d(0,-1,0,104deg);
   transform:rotate3d(0,-1,0,104deg)
  }
 }
 @-webkit-keyframes out-bottom {
  from {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
  to {
   -webkit-transform:rotate3d(1,0,0,104deg);
   transform:rotate3d(1,0,0,104deg)
  }
 }
 @keyframes out-bottom {
  from {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
  to {
   -webkit-transform:rotate3d(1,0,0,104deg);
   transform:rotate3d(1,0,0,104deg)
  }
 }
 @-webkit-keyframes out-left {
  from {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
  to {
   -webkit-transform:rotate3d(0,1,0,104deg);
   transform:rotate3d(0,1,0,104deg)
  }
 }
 @keyframes out-left {
  from {
   -webkit-transform:rotate3d(0,0,0,0deg);
   transform:rotate3d(0,0,0,0deg)
  }
  to {
   -webkit-transform:rotate3d(0,1,0,104deg);
   transform:rotate3d(0,1,0,104deg)
  }
 }

@import "pc";//PC端样式表
@import "style-ipad";//ipad端样式表
@import "style-phone";//iphone端样式表
